@import '../../var';

.cover {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $zindex-cover;
  background-color: rgba(#000, 0.4);
}

.popup-wrap {
  position: fixed;
  top: 30%;
  left: 12.5%;
  z-index: $zindex-dialog;
  display: flex;
  flex-direction: column;
  width: 75%;
  height: 340rpx;
  background-color: $bgcolor-light;
  border: 1px solid $border-color;
  border-radius: 8rpx;

  .content {
    display: flex;
    flex: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .title {
      margin-bottom: $xl;
      font-size: $font-size-large;
    }

    .desc {
      margin-bottom: $md;
      color: $disabled-color;
    }
  }

  .button-wrap {
    flex: none;
    height: 100rpx;
    border-top: 1px solid $border-color;

    button {
      display: inline-block;
      width: 50%;
      height: 100%;
      line-height: 100rpx;
      background-color: transparent;
      //Instead of the line below you could use @include border-radius($radius, $vertical-radius)
      border-radius: 0;

      &.download {
        color: $success-color;
        border-left: 1px solid $border-color;
      }
    }
  }
}
